<section id = "doc_viewport-animation" data-view = "true" data-view-title = "视图切换动画">
	<header>
		<a class = "nav-back" data-view-rel = ":back"></a>
		<span>视图切换动画</span>
		<a class = "menu"></a>
	</header>
	<div class = "body">
		<p>既然View.js属于单页应用框架，那么同一页面下的多个视图切换时，是完全有方式和空间实现页面的切换动画的。</p>
		<p>是的，View.js支持这样做。</p>
		<p>具体来讲，开发者在实现视图切换动画时，需要完成如下工作：</p>
		<ol>
			<li>
				开发动画效果。动画效果以CSS动画为最佳。
				<p class = "no-text-indent">任何情况下，活动视图对应的DOM元素都会含有active样式标记。开发者可以借助该标记实现动画的播放。</p>
			</li>
			<li>
				调用View.js的API：<span class = "code js">View. setSwitchAnimation(func)</span>来设置动画。
				<p class = "no-text-indent">注：视图的切换动画只有这一种方式，如果开发者需要为不同视图之间的跳转呈现不同的动画，则需要在方法体中判定视图切换动作所关联的源视图和目标视图，然后执行不同的动作。
					如果开发者没有额外定义或重载，View.js默认是没有动画的。此时，非活动视图将隐藏（<span class = "code css">display: none</span>），活动视图显示（<span class = "code css">display: block</span>）。</p>
			</li>
		</ol>

		<p>可以参考的视图切换动画代码，如下所示：</p>
		<div class = "code js" >
var timer;

/* 浏览器支持前进后退判断 */
var historyPushPopSupported = ("pushState" in history) && (typeof history.pushState == "function");
View.setSwitchAnimation(function(srcElement, tarElement, type, render){
	"hide2left, hide2right, show2left, show2right, fade-in, fade-out".split(/\s*,\s*/).forEach(function(className){
	srcElement.classList.remove(className);
	tarElement.classList.remove(className);
});

clearTimeout(timer);
timer = setTimeout(function(){
	render();

	var isNav = type == View.SWITCHTYPE_VIEWNAV,
		isChange = type == View.SWITCHTYPE_VIEWCHANGE,
		isHistoryBack = type == View.SWITCHTYPE_HISTORYBACK,
		isHistoryForward = type == View.SWITCHTYPE_HISTORYFORWARD;

	if(!historyPushPopSupported || isChange){
		srcElement.classList.add("fade-out");
		tarElement.classList.add("fade-in");
	}else if(isHistoryForward || isNav){
		srcElement.classList.add("hide2left");
		tarElement.classList.add("show2left");
	}else{
		srcElement.classList.add("hide2right");
		tarElement.classList.add("show2right");
	}
}, 0);
		</div>

		<div class = "code scss" >
html{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
body{
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
}
*[data-view=true]{
	position: absolute;
	opacity: 0;
	z-index: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
*[data-view=true].active{
	opacity: 1;
	z-index: 1;
}
@include keyframes(hide2left){
	from{@include transform(translate3d(0, 0, 0) translate(0, 0)); opacity: 1}
	to{@include transform(translate3d(0, 0, 0) translate(-100%, 0)); opacity: 1}
}
@include keyframes(show2left){
	from{@include transform(translate3d(0, 0, 0) translate(100%, 0)); opacity: 1;}
	to{@include transform(translate3d(0, 0, 0) translate(0, 0)); opacity: 1;}
}
@include keyframes(fadeIn){
	from{opacity: 0.3;}to{opacity: 1;}
}
@include keyframes(fadeOut){
	from{opacity: 1;}to{opacity: 0.3;}
}
		</div>
	</div>
	<footer><div class = "btn next">下一节</div></footer>
</section>